<template>
  <div style="background-color: white">
    <div class="header-container">
      <div class="width-container">
        <div class="left-container">
          <div class="user-header-img">
            <img :src="userInfo.userImg" alt="" />
            <div class="change-img" @click="OpenImgDia">修改头像</div>
          </div>
          <div class="user-info-block">
            <div class="user-name">{{ userInfo.nickName }}</div>
            <div class="userinfo-wrap">
              <div class="sex-position">
                <span>{{ userInfo.sex }}</span>
                <span>{{ userInfo.position }}</span>
              </div>
              <div class="user-id">
                <span>|</span>
                <span>UID：{{ $myUtils.fillWithZeros(userInfo.id, 6) }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right-container"></div>
      </div>
    </div>
    <div class="main-container">
      <div class="width-container">
        <!-- 这里套一层是为了能让外层设置display时，侧边栏依旧可以sticky定位生效 -->
        <div>
          <div class="left-navigation-container clearfix">
            <!-- 循环创建 -->
            <div
              v-for="(item, index) in navigationList"
              :key="index"
              :class="{
                'item-block': true,
                'navigation-active': navigationActiveIndex == index,
              }"
              @click="chooseNavigation(index, item.path)"
            >
              <div class="navigation-icon"></div>
              <div class="navigation-text">{{ item.label }}</div>
              <div class="navigation-square"></div>
            </div>
          </div>
        </div>
        <div class="right-content-container">
          <router-view></router-view>
        </div>
      </div>
    </div>
    <el-dialog
      center
      :title="'修改头像'"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form ref="form">
        <course-image v-model="userImage" :limit="10"></course-image>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSuccess">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import freeCourse from "./components/freeCourse";
import tollCourse from "./components/tollCourse";
import myCollect from "./components/myCollect";
import myInfo from "./components/myInfo";
import shopAddress from "./components/shopAddress";
import { setUserInfo, getUserInfo } from "@/services/user";

import CourseImage from "./components/CourseImage";
export default {
  components: {
    freeCourse,
    tollCourse,
    myCollect,
    myInfo,
    shopAddress,
    CourseImage,
  },
  data() {
    return {
      userInfo: {},
      navigationList: [
        {
          label: "免费课程",
          path: "/userhome/freeCourse",
        },
        {
          label: "付费课程",
          path: "/userhome/tollCourse",
        },
        {
          label: "我的收藏",
          path: "/userhome/myCollect",
        },
        {
          label: "我的订单",
          path: "/userhome/oder",
        },
        {
          label: "个人信息",
          path: "/userhome/myInfo",
        },
        {
          label: "收货地址",
          path: "/userhome/shopAddress",
        },
      ],
      navigationActiveIndex: 0,
      dialogVisible: false,
      userImage: "",
    };
  },
  methods: {
    toGetUserInfo() {
      getUserInfo().then((res) => {
        this.userInfo = res.data.data;
      });
    },
    chooseNavigation(index, path) {
      this.navigationActiveIndex = index;
      this.$router.push({ path });
    },
    OpenImgDia() {
      this.userImage = this.userInfo.userImg;
      this.dialogVisible = true;
    },
    handleSuccess() {
      this.userInfo.userImg = this.userImage;
      localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
      setUserInfo(this.userInfo).then((res) => {
        const data = res.data;
        if (data.msg == "更新成功") {
          this.$message.success(data.msg);
          this.toGetUserInfo();
          this.dialogVisible = false;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
  },
  mounted() {},
  created() {
    this.toGetUserInfo();
  },
  watch: {
    "$route.fullPath": {
      immediate: true,
      handler(n) {
        this.navigationList.forEach((item, index) => {
          if (item.path == n) {
            this.navigationActiveIndex = index;
          }
        });
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.header-container {
  height: 148px;
  background: url("~@/assets/img/user/headerBack.png") no-repeat 0 0;
  background-size: 100%;
  .width-container {
    display: flex;
    justify-content: space-between;
    color: white;
    .left-container {
      display: flex;
      .user-header-img {
        border: 4px solid #fff;
        box-shadow: 0 4px 8px 0 rgb(7 17 27 / 10%);
        width: 140px;
        height: 140px;
        position: relative;
        border-radius: 50%;
        background: #fff;
        top: 24px;
        overflow: hidden;
        box-sizing: border-box;
        img {
          width: 140px;
          margin-top: -4px;
          margin-left: -4px;
        }
        .change-img {
          position: absolute;
          top: 140px;
          height: 35px;
          width: 100%;
          text-align: center;
          padding-top: 5px;
          font-size: 14px;
          background-color: rgba(0, 0, 0, 0.6);
          cursor: pointer;
          transition: top 0.3s;
          user-select: none;
        }
        &:hover {
          .change-img {
            top: 100px;
          }
        }
      }
      .user-info-block {
        height: 102px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-left: 25px;
        .user-name {
          font-weight: 600;
          font-size: 24px;
          color: #fff;
          line-height: 28px;
        }
        .userinfo-wrap {
          font-size: 14px;
          display: flex;
          margin-top: 6px;
          .sex-position,
          .user-id {
            display: flex;
            span {
              margin-right: 10px;
            }
          }
        }
      }
    }
    .right-container {
      height: 102px;
      display: flex;
      align-items: flex-end;
      > div {
        margin-right: 24px;
      }
      .fllow-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        .follow-number {
          font-weight: 700;
          font-size: 24px;
          color: rgba(255, 255, 255, 0.8);
          line-height: 28px;
        }
        .follow-label {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.8);
          line-height: 20px;
          margin-top: 4px;
        }
      }
      .user-set {
        margin-bottom: 5px;
        padding: 8px 16px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 18px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        line-height: 20px;
        height: 20px;
        display: flex;
        cursor: pointer;
        i {
          width: 16px;
          height: 16px;
          margin-right: 4px;
          margin-top: 2px;
          background: url("~@/assets/icon/user/头部设置.png") no-repeat 0 0;
          background-size: 100%;
        }
      }
    }
  }
}
.main-container {
  margin-top: 20px;
  background-color: white;
  min-height: calc(100vh - 374px);

  .width-container {
    // height: 5000px;
    display: flex;
    justify-content: space-between;
    .left-navigation-container {
      position: sticky;
      left: 375.5px;
      top: 90px;
      width: 172px;
      .item-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 48px;
        width: 160px;
        margin: 0 auto 8px;
        font-size: 16px;
        cursor: pointer;
        color: #787d82;
        border-radius: 8px 0 0 8px;
        .navigation-icon {
          margin-left: 20px;
          height: 20px;
          width: 20px;
          background-size: 100%;
        }
        .navigation-text{
          user-select: none;
        }
        .navigation-square {
          border-top: 24px solid white;
          border-bottom: 24px solid white;
          border-left: 15px solid transparent;
        }

        &:nth-child(1) {
          margin-top: 40px;
          .navigation-icon {
            background: url("~@/assets/icon/user/免费课程.png") no-repeat 0 0;
          }
        }
        &:nth-child(2) {
          .navigation-icon {
            background: url("~@/assets/icon/user/付费课程.png") no-repeat 0 0;
          }
        }
        &:nth-child(3) {
          .navigation-icon {
            background: url("~@/assets/icon/user/收藏.png") no-repeat 0 0;
          }
        }
        &:nth-child(4) {
          .navigation-icon {
            background: url("~@/assets/icon/user/订单.png") no-repeat 0 0;
          }
        }
        &:nth-child(5) {
          .navigation-icon {
            background: url("~@/assets/icon/user/个人信息.png") no-repeat 0 0;
          }
        }
        &:nth-child(6) {
          .navigation-icon {
            background: url("~@/assets/icon/user/收货地址.png") no-repeat 0 0;
          }
        }
      }
      .navigation-active {
        background-color: rgba(240, 20, 20, 0.8);
        color: white;
        &:nth-child(1) {
          .navigation-icon {
            background: url("~@/assets/icon/user/免费课程选中.png") no-repeat 0
              0;
          }
        }
        &:nth-child(2) {
          .navigation-icon {
            background: url("~@/assets/icon/user/付费课程选中.png") no-repeat 0
              0;
          }
        }
        &:nth-child(3) {
          .navigation-icon {
            background: url("~@/assets/icon/user/收藏选中.png") no-repeat 0 0;
          }
        }
        &:nth-child(4) {
          .navigation-icon {
            background: url("~@/assets/icon/user/订单选中.png") no-repeat 0
              0;
          }
        }
        &:nth-child(5) {
          .navigation-icon {
            background: url("~@/assets/icon/user/个人信息选中.png") no-repeat 0
              0;
          }
        }
        &:nth-child(6) {
          .navigation-icon {
            background: url("~@/assets/icon/user/收货地址选中.png") no-repeat 0
              0;
          }
        }
      }
    }
    .right-content-container {
      width: 932px;
      margin-top: 40px;
    }
  }
}

.width-container {
  width: 1152px;
  margin: 0 auto;
  background-color: transparent;
}

::v-deep .el-dialog {
  width: 500px !important;
  .el-form-item__content {
    display: flex;
    justify-content: space-between;
  }
}
</style>